---
id: debounced_text_field
title: DebouncedTextField
sidebar_label: DebouncedTextField
---

`DebouncedTextField` is a variation of the standard `TextField` component designed to delay the invocation of the
`onChange` callback. This delay helps in reducing the number of `onChange` calls for inputs that may have
frequent updates, such as during typing.

## Usage

To use `DebouncedTextField`, import it from your components. It supports all the `TextField` props including `value`, `onChange` among others.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic DebouncedTextField

This example shows a basic usage of the `DebouncedTextField`, demonstrating how it can be used to handle value changes with a defer mechanism to reduce the number of updates.

import DebouncedTextFieldBasicDemo from '../../samples/components/debounced_text_field/debounced_text_field_basic';
import DebouncedTextFieldBasicSource
    from '!!raw-loader!../../samples/components/debounced_text_field/debounced_text_field_basic';

<CodeSample>
    <DebouncedTextFieldBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{DebouncedTextFieldBasicSource}</CodeBlock>
